<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>   
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>关于我们</title>
		<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" type="text/css" />
		<script src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js" type="text/javascript"></script>
		<script src="${pageContext.request.contextPath}/js/bootstrap.min.js" type="text/javascript"></script>
		<!-- 引入自定义css文件 style.css -->
		<link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" type="text/css"/>
		<style type="text/css">
		  select {
			  /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
			  border: solid 1px #000;

			  /*很关键：将默认的select选择框样式清除*/
			  appearance:none;
			  -moz-appearance:none;
			  -webkit-appearance:none;

			  /*在选择框的最右侧中间显示小箭头图片*/
			  background:whitesmoke no-repeat scroll right center;


			  /*为下拉小箭头留出一点位置，避免被文字覆盖*/

			  width: auto;
			  padding: 0 2%;
			  margin: 0;
			  padding-right: 14px;
		  }
			option{
				text-align:center;

			}

		/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
		select::-ms-expand { display: none; }
	</style>
	</head>
	<body>
		<!--
            	描述：菜单栏
            -->
			<div class="container-fluid">
				<div class="col-md-4">
					<img src="${pageContext.request.contextPath}/img/logo2.png" />
				</div>
				<div class="col-md-5">

				</div>
				<div class="col-md-3" style="padding-top:20px">
					<ol class="list-inline">
					
					  <c:if test="${empty loginUser}">					
						<li><a href="${pageContext.request.contextPath}/UserServlet?method=loginUI">登录</a></li>
						<li><a href="${pageContext.request.contextPath}/UserServlet?method=registUI">注册</a></li>
					  </c:if>

					  <c:if test="${not empty loginUser}">
						<li>欢迎${loginUser.username}</li>
						<li><a href="${pageContext.request.contextPath}/UserServlet?method=logOut">退出</a></li>
						<li><a href="${pageContext.request.contextPath}/jsp/cart.jsp">购物车</a></li>
						<li><a href="${pageContext.request.contextPath}/OrderServlet?method=findMyOrdersWithPage&num=1">我的订单</a></li>
					  </c:if>	
						
					</ol>
				</div>
			</div>
			<!--
            	描述：导航条
            -->
			<div  class="container-fluid" >
				<nav class="navbar navbar-inverse" >
					<div style="background-color: #333333;" class="container-fluid" >
						<!-- Brand and toggle get grouped for better mobile display -->
						<div class="navbar-header">
							<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
								<span class="sr-only">Toggle navigation</span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
							</button>
							<a class="navbar-brand" href="${pageContext.request.contextPath}/">首页</a>
						</div>

						<!-- Collect the nav links, forms, and other content for toggling -->
						<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" >
							<ul class="nav navbar-nav" id="myUL">
							  <%--
								  <c:forEach items="${allCats}" var="c">	
									<li><a href="#">${c.cname}</a></li>
								  </c:forEach> 
							  --%>
							</ul>
							<form id="submitForm" class="navbar-form navbar-right" role="search" method="post"
								  action="${pageContext.request.contextPath}/ProductServlet?method=findAllProductsWithPage">
								<div class="form-group">
									<c:if test="${allCats !=null}">
										<select name="cid" id="cid" style="width:150px;height: 35px;">
											<option value="" <c:if test="${searchProduct.cid == null || searchProduct.cid == ''}">selected="selected"</c:if> >-请选择-</option>
											<c:forEach items="${allCats}" var="c">
												<%--加载类目,设置搜索词对应的选择项--%>
												<option value="${c.cid}" <c:if test="${searchProduct.cid == c.cid}">selected="selected"</c:if> >${c.cname}</option>
											</c:forEach>
										</select>
									</c:if>
									<input type="text" class="form-control" name="pname" value="${searchProduct.pname}" placeholder="Search">
								</div>
								<button type="submit" class="btn btn-default">搜索</button>
							</form>

						</div>
						<!-- /.navbar-collapse -->
					</div>
					<!-- /.container-fluid -->
				</nav>
			</div>
	</body>
<script>
$(function(){
	//向服务端CategoryServlet__>gteAllCats发起ajax请求,服务端经过处理,
	//将所有分类信息以JSON格式的数据返回,获取到返回的所有分类绑定在页面的显示分类区域
	let url="${pageContext.request.contextPath}/CategoryServlet";
	let obj={"method":"findAllCats"};
	$.post(url,obj,function(data){
		//alert(data);
		//获取到服务端响应会的数据,经过观察data中存放的是一个JSON格式数组,遍历数组,动态的显示分类区域代码	
		$.each(data,function(i,obj){
			let li="<li><a href='javascript:void(0)' onclick=\"ClickCidToSearch('"+ obj.cid +"','"+obj.cname+"')\">"+obj.cname +"</a></li>";
			$("#myUL").append(li);
		});
		
	},"json");
});
function ClickCidToSearch(cid,cname){
	$("#cid").val(cid);
	if($("#cid").length == 0){
		let a = $("#submitForm").attr("action");
		let action = a  + "&cid=" + cid;
		$("#submitForm").attr("action",action);
	}

	/*提交搜索表单*/
	$("#submitForm").submit();

}
</script>
</html>